//引入富文本编辑器
import Editor from "./../../../components/Editor";
import {
  Form,
  Button,
  Upload,
  Input,
  Switch,
  Radio,
} from "antd";
import { UploadOutlined } from "@ant-design/icons";
import { useState } from "react";
import { addPharmacist } from "./../../../api/pharmacist";

const formItemLayout = {
  labelCol: {
    span: 6,
  },
  wrapperCol: {
    span: 14,
  },
};

const AddPharmacist = (props) => {
  //   const [url, setUrl] = useState("");
  const [outerhtml, setOuterhtml] = useState("");

  const normFile = (e) => {
    if (e.fileList[0]) {
      console.log(e);
      console.log("上传", e.file);
      const reader = new FileReader();
      //   reader.onloadend = (e) => {
      //     setUrl(e.target.result);
      //   };
      reader.readAsDataURL(e.file); //把图片转换成base64位格式
      return e && e.fileList;
    }
  };
  const onFinish = (values) => {
    // console.log(values);
    values.avatar = values.avatar[0].thumbUrl;
    values.qualification = values.qualification[0].thumbUrl;
    const Valuess = JSON.parse(JSON.stringify(values));
    Valuess.intro = outerhtml;
    console.log(Valuess);
    addPharmacist(Valuess).then((res) => {
      console.log(res.data);
      props.history.go(0);
    });
  };

  //阻止图片的默认上传
  const beforeUpload = (picture) => {
    // setUrl(e.fileList[0].thumbUrl);
    return false;
  };

  //富文本编辑器中的方法
  const handlerGetHtml = (outerhtml) => {
    setOuterhtml(outerhtml);
  };

  return (
    <Form name="validate_other" {...formItemLayout} onFinish={onFinish}>
      <Form.Item
        {...formItemLayout}
        name="name"
        label="姓名"
        rules={[
          {
            required: true,
            message: "请输入姓名",
          },
        ]}
      >
        <Input placeholder="请输入姓名" />
      </Form.Item>
      <Form.Item
        name="avatar"
        label="头像"
        valuePropName="fileList"
        getValueFromEvent={normFile}
        // rules={[
        //   {
        //     required: true,
        //     message: "请上传头像",
        //   },
        // ]}
      >
        <Upload name="logo" listType="picture" beforeUpload={beforeUpload}>
          <Button icon={<UploadOutlined />}>Click to upload</Button>
          {/* <Image src={ url } /> */}
        </Upload>
      </Form.Item>
      {/* <Form.Item
        wrapperCol={{
          span: 12,
          offset: 6,
        }}
      >
        <Image src={url} />
      </Form.Item> */}
      <Form.Item
        name="isshow"
        label="状态"
        valuePropName="checked"
        rules={[
          {
            required: false,
          },
        ]}
      >
        <Switch />
      </Form.Item>
      <Form.Item
        name="isrecommend"
        label="是否推荐"
        rules={[
          {
            required: true,
            message: "请选择是否推荐！",
          },
        ]}
      >
        <Radio.Group>
          <Radio value={true}>是</Radio>
          <Radio value={false}>否</Radio>
        </Radio.Group>
      </Form.Item>
      <Form.Item
        name="qualification"
        label="资质"
        valuePropName="fileList"
        getValueFromEvent={normFile}
        rules={[
          {
            required: true,
            message: "请上传行医资质",
          },
        ]}
      >
        <Upload name="logo" listType="picture" beforeUpload={beforeUpload}>
          <Button icon={<UploadOutlined />}>Click to upload</Button>
          {/* <Image src={ url } /> */}
        </Upload>
      </Form.Item>
      <Form.Item {...formItemLayout} label="简介">
        <Editor getHtml={handlerGetHtml} />
        渲染富文本编辑器
        <div dangerouslySetInnerHTML={{ __html: outerhtml }}></div>
      </Form.Item>

      <Form.Item
        wrapperCol={{
          span: 12,
          offset: 6,
        }}
      >
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
      </Form.Item>
    </Form>
  );
};
export default AddPharmacist;
